<template>
  <Modal v-model="isOpen" title="新增角色" width="560px" :loading="loading" @on-ok="ok" @on-cancel="cancel">
    <Form ref="role" :model="role" :label-width="80">

      <FormItem label="角色名称:" prop="name">
        <Input type="text" v-model="role.name" />
      </FormItem>
      <FormItem label="状态:" prop="status">
        <RadioGroup v-model="role.status" v-for="(status,idx) in this.$store.state.statusOptions.commons" :key="idx">
          <Radio :label="status.value"><span v-text="status.text"></span></Radio>
        </RadioGroup>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
  import role from '@/models/car/role/index'

  export default {
    name: 'add-role-type',
    data () {
      return {
        isOpen: true,
        loading: true,
        role: {
          name: null,
          status: null
        }
      }
    },
    mounted () {
    },
    methods: {
      ok () {
        role.add(this.role).then(r => {
          if (r.code === 200) {
            this.$emit('on-ok', {
              refresh: true
            })
            this.isOpen = !this.isOpen
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
          } else {
            this.loading = false
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      }
    }
  }
</script>
